<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理 - 文墨勘</title>
    <script src="https://unpkg.byted-static.com/coze/space_ppt_lib/1.0.3-alpha.12/lib/tailwindcss.js"></script>
    <script src="https://unpkg.byted-static.com/fortawesome/fontawesome-free/6.7.2/js/all.min.js" data-auto-replace-svg="nest"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#F4EFEB',
                        secondary: '#EAD2BE', 
                        accent: '#70533B',
                        'text-primary': '#2D2D2D',
                        'text-secondary': '#6B7280',
                        'bg-card': '#FFFFFF',
                        'border-light': '#F3F4F6'
                    },
                    fontFamily: {
                        'chinese': ['-apple-system', 'BlinkMacSystemFont', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'sans-serif']
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.04)',
                        'button': '0 4px 12px rgba(112, 83, 59, 0.15)'
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }
        
        .card-hover:active {
            transform: scale(0.98);
            transition: transform 0.1s ease;
        }
        
        .nav-item-active {
            color: #70533B;
        }
        
        .safe-bottom {
            padding-bottom: env(safe-area-inset-bottom);
        }
        
        .status-bar {
            height: env(safe-area-inset-top, 44px);
            background: linear-gradient(135deg, #F4EFEB 0%, #EAD2BE 100%);
        }

        .file-item {
            transition: all 0.2s ease;
        }

        .file-item:active {
            transform: scale(0.98);
        }

        .status-completed {
            background-color: #D1FAE5;
            color: #065F46;
        }

        .status-processing {
            background-color: #FEF3C7;
            color: #92400E;
        }

        .status-failed {
            background-color: #FEE2E2;
            color: #991B1B;
        }

        .action-button {
            transition: all 0.2s ease;
        }

        .action-button:active {
            transform: scale(0.95);
        }

        .delete-confirm-overlay {
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
        }
    </style>
</head>
<body class="bg-primary font-chinese">
    <!-- iOS状态栏 -->
    <div id="status-bar" class="status-bar flex justify-between items-center px-6 text-sm font-medium text-accent">
        <span>9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <i class="fas fa-battery-three-quarters text-xs"></i>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div id="main-content" class="min-h-screen pb-20">
        <!-- 顶部标题区域 -->
        <header id="page-header" class="gradient-bg px-6 py-6">
            <div class="flex items-center justify-between">
                <button id="back-button" class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
                    <i class="fas fa-arrow-left text-accent"></i>
                </button>
                <h1 id="page-title" class="text-xl font-semibold text-accent">文件管理</h1>
                <div class="w-10"></div> <!-- 占位元素保持标题居中 -->
            </div>
        </header>

        <!-- 文件统计卡片 -->
        <section id="file-stats" class="px-6 -mt-4 mb-6">
            <div class="bg-bg-card rounded-2xl p-4 shadow-card">
                <div class="grid grid-cols-3 gap-4 text-center">
                    <div id="total-files">
                        <div class="text-2xl font-bold text-accent">12</div>
                        <div class="text-xs text-text-secondary">总文件</div>
                    </div>
                    <div id="completed-files">
                        <div class="text-2xl font-bold text-green-600">8</div>
                        <div class="text-xs text-text-secondary">已完成</div>
                    </div>
                    <div id="processing-files">
                        <div class="text-2xl font-bold text-orange-600">4</div>
                        <div class="text-xs text-text-secondary">处理中</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 文件列表 -->
        <section id="file-list-section" class="px-6">
            <div id="file-list-header" class="flex items-center justify-between mb-4">
                <h2 class="text-lg font-semibold text-text-primary">我的文稿</h2>
                <div class="flex items-center space-x-2">
                    <button id="sort-button" class="text-sm text-text-secondary">
                        <i class="fas fa-sort mr-1"></i>排序
                    </button>
                </div>
            </div>

            <div id="file-list" class="space-y-3">
                <!-- 文件项1 -->
                <div id="file-item-1" class="bg-bg-card rounded-2xl p-4 shadow-card file-item" data-doc-id="doc_001">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3 flex-1">
                            <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-word text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-text-primary truncate">《时光回忆录》</h3>
                                <div class="flex items-center space-x-4 text-xs text-text-secondary mt-1">
                                    <span>2024年1月15日 14:30</span>
                                    <span>2.5MB</span>
                                    <span>.docx</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 rounded-lg text-xs font-medium status-completed">已完成</span>
                            <button id="delete-btn-1" class="w-8 h-8 text-text-secondary hover:text-red-500 action-button">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>最后修改：2024年1月15日 16:45</span>
                        <span>发现12处修改</span>
                    </div>
                </div>

                <!-- 文件项2 -->
                <div id="file-item-2" class="bg-bg-card rounded-2xl p-4 shadow-card file-item" data-doc-id="doc_002">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3 flex-1">
                            <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-pdf text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-text-primary truncate">《技术文档规范》</h3>
                                <div class="flex items-center space-x-4 text-xs text-text-secondary mt-1">
                                    <span>2024年1月14日 09:15</span>
                                    <span>1.8MB</span>
                                    <span>.pdf</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 rounded-lg text-xs font-medium status-processing">处理中</span>
                            <button id="delete-btn-2" class="w-8 h-8 text-text-secondary hover:text-red-500 action-button">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>预计完成：5分钟后</span>
                        <span>校对进度：65%</span>
                    </div>
                </div>

                <!-- 文件项3 -->
                <div id="file-item-3" class="bg-bg-card rounded-2xl p-4 shadow-card file-item" data-doc-id="doc_003">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3 flex-1">
                            <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-alt text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-text-primary truncate">《公司年度报告》</h3>
                                <div class="flex items-center space-x-4 text-xs text-text-secondary mt-1">
                                    <span>2024年1月13日 16:20</span>
                                    <span>4.2MB</span>
                                    <span>.txt</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 rounded-lg text-xs font-medium status-completed">已完成</span>
                            <button id="delete-btn-3" class="w-8 h-8 text-text-secondary hover:text-red-500 action-button">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>最后修改：2024年1月13日 18:10</span>
                        <span>发现8处修改</span>
                    </div>
                </div>

                <!-- 文件项4 -->
                <div id="file-item-4" class="bg-bg-card rounded-2xl p-4 shadow-card file-item" data-doc-id="doc_004">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3 flex-1">
                            <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-word text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-text-primary truncate">《产品需求文档》</h3>
                                <div class="flex items-center space-x-4 text-xs text-text-secondary mt-1">
                                    <span>2024年1月12日 11:45</span>
                                    <span>3.1MB</span>
                                    <span>.docx</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 rounded-lg text-xs font-medium status-completed">已完成</span>
                            <button id="delete-btn-4" class="w-8 h-8 text-text-secondary hover:text-red-500 action-button">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>最后修改：2024年1月12日 13:30</span>
                        <span>发现5处修改</span>
                    </div>
                </div>

                <!-- 文件项5 -->
                <div id="file-item-5" class="bg-bg-card rounded-2xl p-4 shadow-card file-item" data-doc-id="doc_005">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3 flex-1">
                            <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-pdf text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-text-primary truncate">《学术论文初稿》</h3>
                                <div class="flex items-center space-x-4 text-xs text-text-secondary mt-1">
                                    <span>2024年1月11日 15:30</span>
                                    <span>5.7MB</span>
                                    <span>.pdf</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 rounded-lg text-xs font-medium status-processing">处理中</span>
                            <button id="delete-btn-5" class="w-8 h-8 text-text-secondary hover:text-red-500 action-button">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>预计完成：10分钟后</span>
                        <span>校对进度：35%</span>
                    </div>
                </div>

                <!-- 文件项6 -->
                <div id="file-item-6" class="bg-bg-card rounded-2xl p-4 shadow-card file-item" data-doc-id="doc_006">
                    <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center space-x-3 flex-1">
                            <div class="w-12 h-12 bg-secondary rounded-xl flex items-center justify-center">
                                <i class="fas fa-file-alt text-accent text-lg"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-text-primary truncate">《小说章节》</h3>
                                <div class="flex items-center space-x-4 text-xs text-text-secondary mt-1">
                                    <span>2024年1月10日 10:20</span>
                                    <span>1.2MB</span>
                                    <span>.txt</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="px-2 py-1 rounded-lg text-xs font-medium status-failed">处理失败</span>
                            <button id="delete-btn-6" class="w-8 h-8 text-text-secondary hover:text-red-500 action-button">
                                <i class="fas fa-trash text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="flex items-center justify-between text-xs text-text-secondary">
                        <span>错误原因：文件格式不支持</span>
                        <button id="retry-btn-6" class="text-accent text-xs underline">重试</button>
                    </div>
                </div>
            </div>

            <!-- 空状态（当没有文件时显示，默认隐藏） -->
            <div id="empty-state" class="text-center py-16 hidden">
                <div class="w-24 h-24 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-folder-open text-accent text-2xl"></i>
                </div>
                <h3 class="text-lg font-medium text-text-primary mb-2">暂无文稿</h3>
                <p class="text-text-secondary mb-6">上传您的第一篇文稿开始智能校对</p>
                <button id="upload-from-empty" class="bg-accent text-white px-6 py-3 rounded-xl shadow-button">
                    <i class="fas fa-cloud-upload-alt mr-2"></i>上传文稿
                </button>
            </div>
        </section>
    </div>

    <!-- 底部导航栏 -->
    <nav id="bottom-nav" class="fixed bottom-0 left-0 right-0 bg-bg-card border-t border-border-light flex justify-around items-center h-16 px-2 safe-bottom z-40">
        <a id="nav-home" href="P-HOME.html" class="flex flex-col items-center p-2 text-text-secondary">
            <i class="fas fa-home text-xl"></i>
            <span class="text-xs mt-0.5">首页</span>
        </a>
        <a id="nav-files" href="#" class="flex flex-col items-center p-2 nav-item-active">
            <i class="fas fa-folder text-xl"></i>
            <span class="text-xs mt-0.5">文件管理</span>
        </a>
        <a id="nav-profile" href="P-USER_CENTER.html" class="flex flex-col items-center p-2 text-text-secondary">
            <i class="fas fa-user text-xl"></i>
            <span class="text-xs mt-0.5">个人中心</span>
        </a>
    </nav>

    <!-- 删除确认弹窗 -->
    <div id="delete-confirm-modal" class="fixed inset-0 z-50 hidden">
        <div class="delete-confirm-overlay absolute inset-0"></div>
        <div class="relative flex items-center justify-center min-h-screen p-4">
            <div class="bg-bg-card rounded-2xl p-6 w-full max-w-sm">
                <div class="text-center">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-semibold text-text-primary mb-2">确认删除</h3>
                    <p class="text-text-secondary mb-6">删除后将无法恢复，确定要删除这个文件吗？</p>
                    <div class="flex space-x-3">
                        <button id="cancel-delete" class="flex-1 py-3 px-4 border border-border-light rounded-xl text-text-secondary font-medium">
                            取消
                        </button>
                        <button id="confirm-delete" class="flex-1 py-3 px-4 bg-red-500 text-white rounded-xl font-medium">
                            删除
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let currentDeleteFileId = null;

            // 返回按钮点击事件
            document.querySelector('#back-button').addEventListener('click', function() {
                window.location.href = 'P-HOME.html';
            });

            // 文件项点击事件
            document.querySelectorAll('.file-item').forEach(function(item) {
                item.addEventListener('click', function(e) {
                    // 如果点击的是删除按钮，不触发文件项点击
                    if (e.target.closest('button[id^="delete-btn-"]')) {
                        return;
                    }
                    
                    const docId = this.dataset.docId;
                    window.location.href = `P-REVIEW_RESULT.html?doc_id=${docId}`;
                });
            });

            // 删除按钮点击事件
            document.querySelectorAll('[id^="delete-btn-"]').forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation(); // 阻止事件冒泡
                    const fileId = this.id.split('-')[2];
                    currentDeleteFileId = fileId;
                    document.querySelector('#delete-confirm-modal').classList.remove('hidden');
                });
            });

            // 取消删除
            document.querySelector('#cancel-delete').addEventListener('click', function() {
                document.querySelector('#delete-confirm-modal').classList.add('hidden');
                currentDeleteFileId = null;
            });

            // 确认删除
            document.querySelector('#confirm-delete').addEventListener('click', function() {
                if (currentDeleteFileId) {
                    const fileItem = document.querySelector(`#file-item-${currentDeleteFileId}`);
                    if (fileItem) {
                        fileItem.remove();
                        updateFileStats();
                    }
                }
                document.querySelector('#delete-confirm-modal').classList.add('hidden');
                currentDeleteFileId = null;
                
                // 显示删除成功提示
                showToast('文件删除成功');
            });

            // 点击弹窗背景关闭
            document.querySelector('.delete-confirm-overlay').addEventListener('click', function() {
                document.querySelector('#delete-confirm-modal').classList.add('hidden');
                currentDeleteFileId = null;
            });

            // 重试按钮点击事件
            document.querySelector('#retry-btn-6').addEventListener('click', function(e) {
                e.stopPropagation();
                const fileItem = document.querySelector('#file-item-6');
                const statusSpan = fileItem.querySelector('.status-failed');
                statusSpan.textContent = '处理中';
                statusSpan.className = 'px-2 py-1 rounded-lg text-xs font-medium status-processing';
                
                // 模拟重新处理
                setTimeout(function() {
                    statusSpan.textContent = '已完成';
                    statusSpan.className = 'px-2 py-1 rounded-lg text-xs font-medium status-completed';
                    updateFileStats();
                }, 3000);
            });

            // 排序按钮点击事件
            document.querySelector('#sort-button').addEventListener('click', function() {
                // 这里可以实现排序功能，目前只是显示提示
                showToast('排序功能开发中');
            });

            // 空状态上传按钮点击事件
            document.querySelector('#upload-from-empty').addEventListener('click', function() {
                window.location.href = 'P-UPLOAD.html';
            });

            // 底部导航栏点击事件
            document.querySelector('#nav-home').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-HOME.html';
            });

            document.querySelector('#nav-files').addEventListener('click', function(e) {
                e.preventDefault();
                // 已在文件管理页面，无需操作
            });

            document.querySelector('#nav-profile').addEventListener('click', function(e) {
                e.preventDefault();
                window.location.href = 'P-USER_CENTER.html';
            });

            // 更新文件统计
            function updateFileStats() {
                const totalFiles = document.querySelectorAll('.file-item').length;
                const completedFiles = document.querySelectorAll('.status-completed').length;
                const processingFiles = document.querySelectorAll('.status-processing').length;
                
                document.querySelector('#total-files .text-2xl').textContent = totalFiles;
                document.querySelector('#completed-files .text-2xl').textContent = completedFiles;
                document.querySelector('#processing-files .text-2xl').textContent = processingFiles;

                // 如果没有文件，显示空状态
                if (totalFiles === 0) {
                    document.querySelector('#file-list-section').classList.add('hidden');
                    document.querySelector('#empty-state').classList.remove('hidden');
                }
            }

            // 显示提示信息
            function showToast(message) {
                // 创建提示元素
                const toast = document.createElement('div');
                toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-text-primary text-white px-4 py-2 rounded-lg text-sm z-50';
                toast.textContent = message;
                document.body.appendChild(toast);

                // 3秒后移除提示
                setTimeout(function() {
                    document.body.removeChild(toast);
                }, 3000);
            }
        });
    </script>
</body>
</html>